<template>
	<view class="">
		<swiperSearch :topList="topList" :keyName="keyName" :name="type"></swiperSearch>
		<!--#ifdef APP -->
		<u-sticky offset-top="0">
			<!--#endif-->
			<view class="bg" v-if="type == 'information'">
				<u-tabs :list="list" @click="click" itemStyle="padding:10px 15px 0 15px;height: 36px;"></u-tabs>
				<u-tabs :list="list1" @click="click1"
					itemStyle="padding:10px 15px 0 15px; width:26%; height: 36px;"></u-tabs>
			</view>
			<view class="bg" v-if="type == 'Busiess'">
				<u-tabs :list="list2" @click="click2"
					itemStyle="padding-left: 15px; padding-top: 15px; padding-right: 15px; width:26%; height: 36px;">
				</u-tabs>
			</view>
			<!--#ifdef APP -->
		</u-sticky>
		<!--#endif-->
		<mescroll-body ref="mescrollRef" height="60%" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<postlist :list="InfoList" v-if="type == 'information'"></postlist>
			<bizlist :list="InfoList" v-if="type == 'Busiess'"></bizlist>
		</mescroll-body>
		<zero-back-top :scrollTop="scrollTop"></zero-back-top>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import swiperSearch from "@/components/swiper-search.vue"
	import postlist from "@/components/postlist.vue"
	import bizlist from "@/components/bizlist.vue"
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			swiperSearch,
			postlist,
			bizlist
		},
		data() {
			return {
				id: '',
				topList: [],
				keyName: "path",
				list: [{
					name: this.$t('information.all'),
					id: 0
				}],
				list1: [{
					name: this.$t('information.Highligh'),
				}, {
					name: this.$t('information.Lastest'),
				}, {
					name: this.$t('information.Nearest')
				}],
				list2: [{
					name: this.$t('Business.Nearest'),
				}, {
					name: this.$t('Business.TotalViewed'),
				}, {
					name: this.$t('Business.Lastest')
				}],
				sort: '',
				secondId: 0,
				InfoList: [],
				scrollTop: 0,
				type: "",
				typeName:"nearby"
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			this.getswiper()
			if (this.type == 'Busiess') {
				this.getdata1(this.typeName)
			}
			if (this.type == 'information') {
				this.getnav()
				this.getdata()
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			downCallback() {
				// 下拉回调
				if (this.type == 'Busiess') {
					this.getdata1(this.typeName)
				}
				if (this.type == 'information') {
					this.getdata()
				}
			},
			upCallback() {
				// 上拉回调
				return
			},
			click(item) {
				console.log('item', item);
				this.secondId = item.id
				this.getdata()
			},
			click1(item) {
				console.log('item', item);
				if (item.index == 0) {
					this.sort = ''
				}
				if (item.index == 1) {
					this.sort = 'latest'
				}
				if (item.index == 2) {
					this.sort = 'distance'
				}
				this.getdata()
			},
			click2(item) {
				console.log('item', item);
				if (item.index == 0) {
					this.typeName = 'nearby'
				}
				if (item.index == 1) {
					this.typeName = 'hot'
				}
				if (item.index == 2) {
					this.typeName = 'new'
				}
				this.getdata1(this.typeName)
			},
			getdata1(typeName) {
				const params = {
					map: 'applet_city_new_shop_list',
					type: typeName,
					page: 0,
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.InfoList = res.data.data
						this.mescroll.endSuccess(res.data.data.length);
					} else {
						this.mescroll.endSuccess(0);
					}
				})
			},
			getdata() {
				const params = {
					map: 'applet_city_post_list',
					category: this.id,
					page: 0,
					sort: this.sort,
					secondId: this.secondId
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res)
						this.InfoList = res.data.data
						this.mescroll.endSuccess(res.data.data.length);
					} else {
						this.mescroll.endSuccess(0);
					}
				})
			},
			getnav() {
				const params = {
					map: 'applet_city_one_second_category',
					oneCategory: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						res.data.data.second.map(item => {
							this.list.push(item)
						})
					} else {}
				})
			},
			getswiper() {
				const params = {
					map: 'applet_city_post_list',
					category: this.id
				}
				if (this.type == 'Busiess') {
					params.map = 'applet_getSlide'
					params.id = this.id
				}
				console.log(params)
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res)
						if (this.type == 'Busiess') {
							this.keyName = "imgsrc"
							this.topList = res.data.data
						}
						if (this.type == "information") {
							this.keyName = "path"
							this.topList = res.data.slide
						}
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f4f4f4;
	}
	.bg {
		background-color: #fff;
	}
</style>
